<template>
	<view class="member">
		<view class="member-top" id="memberTop">
			<toSafe></toSafe>
			<uni-nav-bar 
				:fixed="true" 
				@clickLeft="HandleLeft" 
				leftIcon="left" 
				:border="false" 
				:title="Title"
				color="#fff"
				id="navbar"
				backgroundColor="transparent"></uni-nav-bar>
			<view class="member-text">
				<view class="member-title">会员套餐</view>
				<view class="member-des">开通VIP会员尊享多项特权权益</view>
			</view>
		</view>

		<view 
			class="select-member-type" 
			:style="{'height': scrollHeight + 'px','margin-top': marginTop + 'px'}">
			<view class="member-type-title">
				选择会员套餐
			</view>
			<view class="member-type">
				<view 
					:class="['member-type-item',selectMemberItem.cardType == item.cardType ? 'active-type':'']" 
					v-for="(item, index) in memberList" 
					:key="index" 
					@click="selectMemberType(item)">
					<view class="lever1" v-if="item.cardType == 1">低价尝鲜</view>
					<view class="lever1" v-if="item.cardType == 2">高性价比</view>
					<view class="lever1" v-if="item.cardType == 3">豪华权益</view>
					<view class="lever2">
						{{item.cardName}}
					</view>
					<view class="discounted">
						<text>$</text><text style="font-size: 52rpx;">{{item.cardPrice}}</text>
					</view>
					<view class="original">
						原价{{item.originalPrice}}元
					</view>
					<view class="line"></view>
					<view class="validity">
						{{item.cartTime}}天
					</view>
				</view>
			</view>
			
			<view class="member-type-title">
				会员专属权益
			</view>
			<view class="member-benefits">
				近日，陕西延安培文实验学校一家长“交4万学费，孩子一科目只考8分”而怒怼校方的视频引起网友热议。据悉，在延安培文实验学校家长会上，一位家长称孩子的成绩在中学时数一数二，转到该校就读后，高中单科却只考了8分，而且还有不少孩子考了5分甚至更低，但收费却是“全延安最高的学校”，此事引起众多家长议论。7月26日，正观新闻记者联系到相关人士了解详情。
			</view>
			
			<view class="submit" @click="submit">
				确认协议并付费
			</view>
			<view class="submit-des">
				开通会员代表接受
				<text>《会员服务协议》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import toSafe from '@/compoents/top-safe.vue'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {getElementHeight} from '@/utils/common.js'
	import {getMembershipList} from '@/api/Novel.js'
	import { airwallexPayToken, payInfo } from '@/api/payment';
	let Title = ref("会员中心");
	const HandleLeft = () => {
		let delta = 1;
		uni.navigateBack({
			delta
		});
	}
	let scrollHeight = ref(0),marginTop = ref(0);
	onMounted(() => {
		let safeHeight = 0, systemHieght = 0;
		const systemInfo = uni.getSystemInfoSync();
		safeHeight = systemInfo.safeAreaInsets.top;
		systemHieght = systemInfo.safeArea.height;
		getViewHeight(systemHieght,safeHeight);
	})
	const getViewHeight = (systemHieght, safeHeight) => {
		getElementHeight(this, '#navbar')
		.then((height) => {
			marginTop.value = -(height);
			console.log(marginTop)
		})
		
		getElementHeight(this, '#memberTop')
		.then((height) => {
			scrollHeight.value = ((systemHieght-safeHeight) - height) - marginTop.value;
		})
	};
	
	const memberList = ref([]);
	const getMemberList = async() => {
		let res = await getMembershipList();
		console.log(res)
		memberList.value = res.rows;
	}
	getMemberList();
	
	let selectMemberItem = ref({});
	const selectMemberType = (item) => {
		selectMemberItem.value = item;
	}
	
	const submit = () => {
		if(JSON.stringify(selectMemberItem.value) == '{}') {
			uni.showToast({
				title:"请选择会员套餐",
				icon: 'none',
				duration:2000
			})
			return;
		}
		airwallexPayToken().then((res) => {
			let params = {
				amount: selectMemberItem.value.cardPrice,
				token: res.data.token,
				currency: 'USD',
				orderType: 2,
				cardId: selectMemberItem.value.cardId
			}
			payInfo(params).then((res) => {
				uni.navigateTo({
				  url: '/pages/webview/index?secretId='+res.data.client_secret + '&intentId='+res.data.id
				});
			})
		})
	}
</script>

<style lang="less">
	.member-top {
		background-image: url('../../punlic/image/memberBg.png');
		background-position: center;
		background-size: 100%;
		width: 100%;
		.member-text {
			padding-top: 38rpx;
			color: #fff;
			font-family: "PingFang SC";
			padding-left: 34rpx;
			padding-bottom: 130rpx;
			.member-title {
				font-size: 44rpx;
				font-weight: 500;
				opacity: 0.9;
			}

			.member-des {
				font-size: 26rpx;
				font-weight: 400;
				opacity: 0.5;
				margin-top: 20rpx;
			}
		}
	}

	.member-type-title {
		color: #000000;
		font-family: "PingFang SC";
		font-size: 34rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		opacity: 0.9;
		padding-left: 28rpx;
	}
	.member-type {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx;
		.member-type-item {
			width: 210rpx;
			height: 270rpx;
			border-radius: 24rpx;
			position: relative;
			border: 3rpx solid #eee;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			.lever1 {
				position: absolute;
				width: 160rpx;
				height: 48rpx;
				flex-shrink: 0;
				border-radius: 24rpx 0;
				background: linear-gradient(90deg, #FEEBCF 0%, #FFD6A7 100%);
				left: 0;
				top: -24rpx;
				color: #935c34;
				text-align: center;
				font-size: 24rpx;
				line-height: 48rpx;
			}
			.lever2 {
				color: #333;
				font-size: 26rpx;
				font-weight: 500;
				margin-top: 50rpx;
			}
			.discounted {
				color: #6B4A25;
				font-size: 26rpx;
				font-weight: 500;
				margin-top: 10rpx;
				display: inline-flex;
				align-items: center;
				line-height: 1;
			}
			.original {
				color: #999;
				text-decoration: line-through;
				font-weight: 200;
				font-size: 24rpx;
			}
			.line {
				width: 100%;
				height: 2rpx;
				margin-top: 28rpx;
				opacity: 0.1;
				background: #000;
			}
			.validity {
				color: #333;
				font-size: 24rpx;
				font-weight: 500;
				padding: 10rpx 0rpx;
			}
			
		}
		.active-type {
			border: 4px solid #FCDBAC;
			background: linear-gradient(180deg, #FDF4E3 0%, #FFF 100%);
		}
	}
	
	.member-benefits {
		font-size: 28rpx;
		color: #666;
		padding: 0 28rpx;
		margin-top: 30rpx;
	}
	.select-member-type {
		background-color: #fff;
		border-radius: 36px 36px 0 0;
		margin-top: -88rpx;
		padding-top: 40rpx;
		font-family: "PingFang SC";
		overflow-y: auto;
	}
	.submit {
		height: 88rpx;
		background: #E5353F;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
		border-radius: 44rpx;
		margin: 0 28rpx;
		margin-top: 172rpx;
		font-size: 30rpx;
		font-weight: 400;
	}
	.submit-des {
		color: #666;
		font-size: 24rpx;
		text-align: center;
		padding: 20rpx 0;
		text {
			color: #e5353f;
		}
	}
</style>